@charset "utf-8";

/* 去掉内边距和外边距 */
*{
	margin: 0;
	padding: 0;
}

body{
	background-color: #d5d5d5;
	font-family: "Helvetica";
	font-size: 62.5%;
}

h2{
	font-size: 2em;
	line-height: 30px;
}

h3{
	font-size: 1.5em;
	color: gray;
	line-height: 30px;
}

span{
	font-size: 1.1em;
	color: gray;
	line-height: 30px;
}

p{
	line-height: 24px;
	text-indent: 2em;
}

p, li, figcaption{
	font-size: 1.4em;
}

/********************************* 设置头部 *********************************/
header, footer{
	height: 60px;
	background-color: #262626;
}

header img{
	float: left;
}

nav{
	float: right;
	margin-right: 24px;
}

nav li{
	display: inline;
	margin-left: 10px;
	/* 设置 line-height 为居中 */
	line-height: 60px;
}

nav li a{
	font-size: 0.9em;
	color: white;
	text-decoration: none;
}

/********************************* 设置中间段落 *********************************/
article:first-child{
	clear: both;
}
/* 通用属性，内外边距、背景、边框、边框阴影 */
article, aside{
	margin: 24px;
	padding: 40px 24px;
	background-color: white;
	border: solid 1px #c0c0c0;
	box-shadow: 1px 1px 1px 1px gray;
}
/* 段落中的图片设置边距 */
.article_img {
	padding: 15px 0;
}

/* 设置第二个段落中的列表 */
#article_02 li{
	list-style-type: none;
	padding-left: 20px;
}

/* 设置图片列表中图片边框 */
#article_03 figure{
	width: 120px;
	height: 130px;
	margin: 15px 0px 0px 40px;
	border: 1px solid #c0c0c0;
}

 #article_03 figcaption{
	height: 40px;
	line-height: 40px;
	vertical-align: bottom;
	text-align: center;
}

#article_03 figure img{
	padding: 0px 10px 10px 10px;
	width: 100px;
	height: 80px;
}

/* 第四个中的列表 */
#article_04 li{
	margin-left: 40px;
}
/* 第四个中的表格 */
#article_04 table{
	width: 100%;
	border-collapse: collapse;
}

#article_04 table caption{
	text-align: left;
	font-size: 1.4em
}

#article_04 table th{
	background-color: black;
	color: white;
}

#article_04 table th, #article_04 table td{
	border: solid 1px #c0c0c0;
	text-align: left;
	font-size: 1.2em;
	padding: 3px;
}

#total, #result{
	font-weight: bold;
	font-size: 1.2em;
	background-color: silver;
}
/********************************* 侧边栏 *********************************/
form{
	font-size: 1.2em;
}

#label_email, #label_psd, #label_confirm_psd, #label_sex_title, #label_city, #label_hobby, #lable_des{
	width: 50%;
	display: block;
	text-align: right;
	float: left;
}

.alert{
	margin-left: 50%;
	width: 50%;
	text-align: left;
	line-height: 30px;
	color: gray;
}

.label_sex{
	margin-right: 10px;
}

textarea{
	width: 45%;
	height: 80px;
}

button {
	width: 100%;
	height: 36px;
	background-color: #273bc8; 
	border: 0;
	border-radius: 6px;
	color: white;
	font-size: 1.2em;
}

/********************************* footer *********************************/
footer p{
	color: white;
	text-align: center;
	line-height: 60px;
	font-size: 1.3em;
}